<template>
	<router-view />
	<NavBar v-if="state.show"></NavBar>
</template>

<script setup lang="ts">
import NavBar from "@/components/NavBar.vue";
import { useRouter } from "vue-router";
import { reactive } from "vue";

const state = reactive({
	menu: ["/home", "/data", "/user"],
	show: false
});
const router = useRouter();
router.afterEach(to => {
	state.show = state.menu.includes(to.path);
});
</script>


<style scoped>
.logo {
	height: 6em;
	padding: 1.5em;
	will-change: filter;
	transition: filter 300ms;
}
.logo:hover {
	filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
	filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
